
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { formatDate } from '../../../../packages/shared-utils/src'
import requestApi from '../request/api'
// console.log('【About ----> requestApi...........】', requestApi)

const date = ref(formatDate(Date.now()))
//1\创建响应式数据
const userData = ref<any[]>([])
const loading = ref(false)
//2\封装请求函数
const fetchUser = async () => {
  try {
    const response = await requestApi.getUserDataList({ option: 1 })
    userData.value = response.data
    console.log('请求数据.....User data:', response.data)
  } catch (error) {
    console.error('Error fetching user data:', error)
  } finally {
    console.log('Request completed')
    loading.value = false
  }
}
const getintegralItemsData = async () => {
  try {
    const response = await requestApi.integralItems({ })
    console.log('请求数据.....getintegralItemsData data:', response.data)
  } catch (error) {
    console.error('Error fetching getintegralItemsData data:', error)
  } finally {
    console.log('Request completed')
  }
}
//3\使用生命周期函数 (页面加载时调用)
onMounted(() => {
  loading.value = true
  fetchUser()
  getintegralItemsData()
})

</script>

<template>
  <div>
    <p>This is About page.</p>
    <p>Current date: {{ date }}</p>
    <div v-if="loading">.....loading</div>
    <div v-else>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in userData" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 4px;
  text-align: center; /* 让所有单元格（包括表头和内容）居中 */
}

.title {
  font-weight: 400;
  font-size: 16px;
  color: green;
}
.progress_box {
  height: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 5px auto;
  position: relative;
  .progress_bar {
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    background: green;
    border-radius: 8px;
  }
}
</style>

